<template>
  <view class="item">姓：<input v-model="firstName" /></view>
  <view class="item">名：<input v-model="lastName" /></view>
  <view class="item">姓名：<input v-model="fullName" /></view>
</template>

<script setup lang="ts">
import { ref, reactive, computed } from "vue";
let firstName = ref("");
let lastName = ref("");

//1.计算属性：简写形式
// let fullName = computed(() => {
//   return firstName.value + "-" + lastName.value;
// });

//2.计算属性：setter和getter
let fullName = computed({
  get() {
    return firstName.value + "-" + lastName.value;
  },
  set(val) {
    let arr = val.split("-");
    firstName.value = arr[0];
    lastName.value = arr[1];
  },
});
</script>

<style style="less" scoped>
.item {
  display: flex;
}
input {
  border: 1rpx solid #333;
}
</style>
